/* SDME portal theme. Change the look here: every colour, radius and font is a variable. */
:root {
  /* Brand (adjust to the reference screenshot) */
  --navy: #0B1F3A;          /* header, bottom nav, headings */
  --gold: #C9A227;          /* accents, active states, badges, buttons */
  --cream: #FBF6E9;         /* page background, cards */

  /* Derived. Gold is too light for text on cream (about 2.3:1), so text uses --gold-ink (about 5.6:1). */
  --gold-ink: #7A5F06;
  --gold-soft: #F3E6B3;
  --navy-soft: #1B3358;
  --ink: #1B2433;           /* body text on cream, about 14:1 */
  --ink-muted: #4A5568;     /* secondary text on cream, about 7:1 */
  --line: #E4DABB;
  --surface: #FFFDF7;
  --success: #1F6B3A; --danger: #A12A2A;

  --radius-sm: 10px; --radius: 16px; --radius-lg: 20px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, .06), 0 2px 8px rgba(11, 31, 58, .05);
  --shadow-md: 0 4px 18px rgba(11, 31, 58, .12);
  --tap: 44px;              /* minimum tap target */

  --font-display: "Source Serif 4", "Noto Serif Kannada", Georgia, "Times New Roman", serif;
  --font-body: "Noto Sans", "Noto Sans Kannada", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1rem/1.6 var(--font-body); }
html[lang="kn"] body { line-height: 1.75; }                 /* Kannada glyphs need more leading */
img { max-width: 100%; height: auto; }
a { color: var(--navy); }
h1, h2, h3, h4 { margin: 0 0 var(--space-2); color: var(--navy); font-family: var(--font-display); font-weight: 600; line-height: 1.25; }
h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); } h2 { font-size: clamp(1.25rem, 3.6vw, 1.6rem); } h3 { font-size: 1.1rem; }
p { margin: 0 0 var(--space-3); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-3); top: -4rem; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--navy); color: var(--cream); border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-3); }

/* Layout */
.container { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.section { padding-block: var(--space-5); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--space-4); border: 2px solid transparent; border-radius: var(--radius-pill); font: 600 .95rem/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn--gold { background: var(--gold); color: var(--navy); }          /* navy on gold: about 7:1 */
.btn--gold:hover { background: #D9B43A; }
.btn--navy { background: var(--navy); color: var(--cream); }
.btn--navy:hover { background: var(--navy-soft); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--cream); }

/* Filter chips (horizontal scroller) */
.chips { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-1) 0 var(--space-2); scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; min-height: var(--tap); padding: 0 var(--space-4); border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--navy); font: 600 .9rem/1 var(--font-body); white-space: nowrap; cursor: pointer; scroll-snap-align: start; }
.chip:hover { border-color: var(--gold); }
.chip.is-active { background: var(--navy); border-color: var(--navy); color: var(--cream); box-shadow: inset 0 -3px 0 var(--gold); }

/* Badges */
.badge { display: inline-block; padding: .2rem .65rem; border-radius: var(--radius-pill); background: var(--gold-soft); color: #4A3A00; font: 600 .75rem/1.4 var(--font-body); }
.badge--open_now { background: #DDF0E3; color: var(--success); }
.badge--autonomous { background: var(--navy); color: var(--cream); }

/* Card */
.card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card__media { display: block; aspect-ratio: 16 / 10; background: var(--navy); }
.card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.card__badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.card__title { margin: 0; font-size: 1.1rem; } .card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.card__text { margin: 0; color: var(--ink-muted); font-size: .95rem; }
.card__note { margin: 0; color: var(--gold-ink); font-size: .8rem; }
.card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.card[hidden] { display: none; }

/* Search field */
.field { width: 100%; min-height: var(--tap); padding: 0 var(--space-4); border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; }
.field:focus-visible { border-color: var(--navy); }

/* Definition list used for meals / key facts */
.facts { display: grid; gap: var(--space-2); margin: 0; }
.facts > div { display: flex; gap: var(--space-3); padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.facts dt { flex: 0 0 7rem; font-weight: 600; color: var(--gold-ink); }
.facts dd { margin: 0; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }